/*一次性执行函数
写 js 形成自己的工具库

写完之后再统一抽出去

 js 入口： 
(function(){
		var obj = {};

	type, url, data, headers, context, callback
	
		context 就是回调函数中的 this
	
	obj.ajax = function(type, url, data, headers, context, callback){
		$.ajax({
			type: type,
			url: url,
			data:JSON.stringify(data),
			headers: headers,
			context: context
		}).done(callback);

		window.j = obj; //加载文件的时候，首先加载它，以后直接用
						//注意下面如何使用
	};

})

	//model: 前端数据模型:和 后端数据模型数据对接
	//view: html 的模板，结构固定，但是内容是可变的，需要和model结合，model的改变映射到 vm 上
		//单双向绑定机制


	//组件（类似于渲染器）
	function CustomersComponent(template){
		this.model = null;   //model 就是我们的数据模型，说白了，就是我们之前定义的那个数据结构
		this.template = template; //视图: 感觉上是坐标:如下面所写的，它的确是定位坐标的作用
		this.addCustomer = function(customer){  //json 规则要求，不能用-，故："Content-Type" 要加引号
			model.push()
		};

		this.updateCustomer = function(customer){

		};

		this.findAllCustomers = function(){
			j.ajax("GET", "findAllCustomers", null, null, this, function(customers){
				_render(customers);
			});
		}; 
 
		function _render(data){ //内部function，在外部永远不会调用； 这个_render 充当的角色就是 vm
								//要渲染的数据从外面传过来
			template.empty(); 
			data.forEach(function(item){
				//老师承认自己的动态生成应该写成我们那种形式的
				//VM 绑定的体现 .data(item)

				$("<tr/>").append($("<td/>"))

			});


			//先找出所有的delete按钮
			$("button:contains(del)").on("click")
				$this = $(this);   //$this的名字随便起，只是提醒他是$(this)
				j.ajax("DELETE", "deleteCustomer?id="+$this.data().id, null, null, function(m){
					data = data.filter(function(item){   //此方法只是表面更新，所以要在回调函数里面更新后台操作
					return item.id != $this.data().id;
					});
				});
				

		}
	};


$(function(){
	var c = new CustomersComponent($("#customers"));
	c.findAllCustomers();
	$("button", "form").on("click", function(e){
		var cname = $("input[name=cname]").val();
		var sal = $("input[name=sal]").val();


	})
	


	//两种方法阻止button提交:1、 e.preventDefault； 2、把button 放到外面



})
	


*/